<template>
  <div class="link-main">
    <div class="link-container-list">
      <!--顶部搜索 -->
      <div class="top-operate">
        <el-input @keyup.enter.native="doSearch" v-model="searchListQuery.title" placeholder="请输入商品名称"
          class="mar-r-16 width-250"></el-input>
        <el-button class="group-b-left" type="primary" size="small" @click="doSearch">查询</el-button>
        <el-button class="group-b-right" size="small" @click="doResetSearch">重置</el-button>
      </div>
      <!-- 内容列表 -->
      <div class="table-container">
        <el-table :data="dataList" v-loading="listLoading" element-loading-text="加载中">
          <el-table-column label="商品" prop="title">
            <template slot-scope="scope">
              <div class="flex v-align-c cursor-p">
                <label><img :src="scope.row.mainImage" class="user-avatar"></label>
                <div class="font-14 pad-l-10">
                  <div>{{scope.row.title}}</div>
                  <template v-if="scope.row.categoryName">
                    <div class="category-style">[{{scope.row.categoryName}}]</div>
                  </template>
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column align="center" width="100px" label="零售价" prop="sellPrice"></el-table-column>
          <el-table-column align="center" width="100px" label="库存" prop="stock"></el-table-column>
          <el-table-column align="center" width="100px" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" @click="doSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 列表分页 -->
    <div class="pagination-box">
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="searchListQuery.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
          layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getGoodsList,
    listGoodsCategory
  } from '@/api/goods/goods'

  export default {
    props: {
      appType: {
        type: Number,
        default: 10
      }
    },
    data() {
      return {
        // 零售商品分类model
        categoryIds: [],
        // 查询条件
        searchListQuery: {
          enterpriseId: '',
          currentPage: 1,
          size: 10,
          title: ''
        },
        // 零售商品分类集合
        categoryData: [],
        total: 0,
        listLoading: false,
        dataList: [],
        multipleSelection: []
      }
    },
    // 初始化页面
    created() {
      const enterpriseId = this.getEnterpriseId()
      listGoodsCategory(enterpriseId).then(response => {
        this.categoryData = response.data
      })
      this.initList()
    },
    mounted() {},
    methods: {
      // 初始化
      initList() {
        const size = this.searchListQuery.size
        const currentPage = this.searchListQuery.currentPage
        const originData = this.$options.data()
        this.searchListQuery = originData.searchListQuery
        this.searchListQuery.size = size
        this.searchListQuery.currentPage = currentPage
        // 零售商品分类
        this.searchListQuery.oneCategoryId = this.categoryIds.length > 0 ? this.categoryIds[0] : ''
        this.searchListQuery.twoCategoryId = this.categoryIds.length > 1 ? this.categoryIds[1] : ''
        this.searchListQuery.threeCategoryId = this.categoryIds.length > 2 ? this.categoryIds[2] : ''
        // 应用类型
        switch (this.appType) {
          case 10:
            this.searchListQuery.goodsStatus = '1'
            this.searchListQuery.goodsTypes = '30,32'
            break
          case 11:
            this.searchListQuery.wholesaleGoodsStatus = '1'
            this.searchListQuery.goodsTypes = '31,32'
            break
          case 13:
            this.searchListQuery.goodsStatus = '1'
            this.searchListQuery.goodsTypes = '30,32'
            this.searchListQuery.selectionGoodsType = '1'
            break
          default:
        }
        this.searchListQuery.enterpriseId = this.getEnterpriseId()
        this.loadData()
      },
      loadData() {
        this.listLoading = true
        // 搜索状态
        getGoodsList(this.searchListQuery).then(response => {
          this.total = response.total
          this.dataList = response.records
          this.listLoading = false
        })
      },
      // 查询事件
      doSearch() {
        this.searchListQuery.currentPage = 1
        this.loadData()
      },
      // 重置事件
      doResetSearch() {
        const originData = this.$options.data()
        this.categoryIds = originData.categoryIds
        this.searchListQuery = originData.searchListQuery
        this.initList()
      },
      // 选择事件
      doSelect(row) {
        this.$emit('selectGoods', row)
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.initList()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.initList()
      }
    }
  }
</script>

<style lang="less" scoped>
  .user-avatar {
    width: 68px;
    height: 68px;
    display: block;
    padding: 1px;
    border: #efefef 1px solid;
  }

  .category-style {
    color: #3abbdb
  }

  .link-container-list {
    margin-right: 20px;
    height: 440px;
    overflow: auto;
    overflow-x: hidden;

    &::-webkit-scrollbar {
      width: 4px;
    }

    &::-webkit-scrollbar-thumb {
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      background: rgba(0, 0, 0, 0.2);
    }

    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: rgba(0, 0, 0, 0.1);
    }
  }

  .pagination-box {
    position: relative;
    z-index: 20;
  }

  .pagination {
    position: absolute;
    right: 20px;
    top: 0px;
    width: 100%;
    z-index: 3000;
  }
</style>
